iOS TableView滚动时的视觉差效果
撰写于 2016-07-08
修改于 2016-08-20
前言:
这个TableView滚动的视觉差效果实现起来比较简单, 又非常实用, 可以拿到项目中使用, licecap
制作的GIF动图失帧比较严重, 所以建议大家下载下来到手机或者模拟器上运行效果会更好!
GitHub下载地址 - LRPerceivedErrorEffect
效果图:
当滚动tableView时候,cell中的图片也会随着滚动而滚动,从而体现出双滚动效果,也就是视觉差效果。
视觉差效果的实现
首先我们要自定义一个Cell
在LRPerceivedErrorCell.h
中我们需要加一些方法, 在Xib添加一个UIImageView
拖线到.h
中:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| #import <UIKit/UIKit.h> @interface LRPerceivedErrorCell : UITableViewCell * 背景图片 */ @property (weak, nonatomic) IBOutlet UIImageView *backgroundImage; * Xib创建Cell */ + (instancetype)perceicedErrorCellFromXib:(UITableView *)tableView; * 背景图片y值设置 */ - (void)cellOnTableView:(UITableView *)tableView didScrollView:(UIView *)view; @end
|
我们在Xib中是如何设置图片的, 我们来看看如下图:
在上图中Top
值与Bottom
值需要根据你自己的项目需求进行调整!
接下来我们重点来实现- (void)cellOnTableView:(UITableView *)tableView didScrollView:(UIView *)view;
这个方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| - (void)cellOnTableView:(UITableView *)tableView didScrollView:(UIView *)view { CGRect rect = [tableView convertRect:self.frame toView:view]; float distanceCenter = CGRectGetHeight(view.frame)/2 - CGRectGetMinY(rect); float difference = CGRectGetHeight(self.backgroundImage.frame) - CGRectGetHeight(self.frame); float imageMove = (distanceCenter / CGRectGetHeight(view.frame)) * difference; CGRect imageRect = self.backgroundImage.frame; imageRect.origin.y = imageMove - (difference/2); self.backgroundImage.frame = imageRect; }
|
这个方法实现完成之后,我们开始在ViewController
使用:
首先实现<UIScrollViewDelegate>
协议中的- (void)scrollViewDidScroll:(UIScrollView *)scrollView;
代理方法如下:
1 2 3 4 5 6 7 8 9 10 11
| - (void)scrollViewDidScroll:(UIScrollView *)scrollView { NSArray *visibleCells = [self.perceivedErrorTableView visibleCells]; for (LRPerceivedErrorCell *cell in visibleCells) { [cell cellOnTableView:self.perceivedErrorTableView didScrollView:self.view]; } }
|
为了调整图片的初始值, 我们需要在视图加载完调用一次scrollViewDidScroll方法:
1 2 3 4 5 6
| - (void)viewDidAppear:(BOOL)animated { [super viewDidAppear:animated]; [self scrollViewDidScroll:[[UIScrollView alloc]init]]; }
|
UITableView的实现我就不多解释了, tableView的一些细节属性设置大家可以下载源码看一下, 非常简单!
如果喜欢的小伙伴请点一个赞吧,欢迎留言补充与给出不足之处!